<template>
    <view class="make">
        <view class="list">
            <view class="item" v-for="i in 500" :key="i">
                <text>{{info}}</text>
            </view>
        </view>
    </view>
</template>

<script>
	import {
		mapGetters,
	}
	from 'vuex';
    export default {
        name: "watermark",
        data() {
            return {
				info: ''
            };
        },
		computed: {
			...mapGetters(['APP_USER'])
		},
		watch: {
			APP_USER: {
				handler(newVal) {
					// console.log("登录用户", newVal);
					let today = this.$moment().format('YYYY年MM月DD日')
					if (newVal && newVal.userName) {
						this.info = newVal.userName + '-' + today
					} else {
						this.info = today
					}
				},
				// 表示同时监听初始化时的props的show的意思
				immediate: true
			}
		}
    }
</script>

<style lang="scss" scoped>
    .make {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 9999;
        background: rgba(0, 0, 0, 0);
        pointer-events: none;

        .list {
            width: 500%;
            height: 400%;
            position: absolute;
            top: -50%;
            left: -50%;
            transform: rotate(-45deg);
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            pointer-events: none;

            .item {
                font-size: 32rpx;
                color: rgba(220, 220, 220, 0.3);
                font-weight: bold;
                padding: 30rpx;
                pointer-events: none;
            }
        }
    }
</style>